﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>委托单签字</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="scripts/boot.js" type="text/javascript"></script>
    <script src="scripts/jSi/jSignature.min.js" type="text/javascript"></script>
    

    <style type="text/css">
    html, body
    {        
        padding:0;
        margin:0;
        border:0;
        height:100%;
        overflow:hidden;
    }

    .container {
        width: 100%;
        height: 100%;
        display: flex; justify-content: center; align-items: center;
    }
    </style>
</head>
<body>

<div class="container">
    <div id="signatureparent" style="width: 100%;">
        <div id="signature"><image id="view" width="100%" height="190" style="position: absolute;" /></div>
        <div style="width: 100%; text-align: center;">
            <button type="button" class="btn btn-primary btn-block" id="save">保存</button> &nbsp;
            <button type="button" class="btn btn-default btn-block" id="clear">清除</button> &nbsp;
            <button type="button" class="btn btn-default btn-block" id="cancel">取消</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var id = null; // 委托单ID
    
    var param = {
        width: '100%',//签名区域的宽
        height: '200px',//签名区域的高
        cssclass: 'zx11',//画布的类 可以写自定义的样式
        UndoButton: false,//撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
        signatureLine: false,//去除默认画布上那条横线
        lineWidth: '3' //画笔的大小
    };

    $("#signature").jSignature(param);

    //提交
    $('#save').click(function () {
        if($("#view").length > 0) {
            // 未重写
            alert("签名未改变！");
            CloseWindow("close");
            return;
        }

        if($("#signature").jSignature('getData', 'native').length === 0) {
            alert("请签字后再提交！");
            return;
        }
        // var coconfirmn = confirm("提交后不可更改，确认提交签字吗？");
        // if(confirm === false) return;

        // 将签字的画布保存为base64编码字符串 默认是png的
        var datapair = $("#signature").jSignature("getData","image");
        var i = new Image();
        i.src = "data:" + datapair[0] + "," + datapair[1];
        // console.log(datapair[0]); //image/png;base64,
        i.image = datapair[1];
        // console.log(i.image);

        $.ajax({
            url: "/sign/bus/utensil/indent/sign",
            type: "post",
            data: '{"id":"'+ id +'","signContent":"'+ i.image +'"}',
            dataType:"json",
            contentType: "application/json;charset=UTF-8",
            cache: false,
            success: function (text) {
                CloseWindow("save");
            }
        });
    });

    // jSignature提供了清除的API reset
    $('#clear').click(function () {
        $("#view").remove();
        $("#signature").jSignature("reset");
    });

    // 取消
    $('#cancel').click(function () {
        CloseWindow("close");
    });

    function SetData(data) {
        //跨页面传递的数据对象，克隆后才可以安全使用
        data = mini.clone(data);
        id = data.id;

        if(data.signStatus) {
            $.ajax({
                url: "/sign/bus/utensil/indent/id/" + id,
                type: "post",
                cache: false,
                success: function (text) {
                    var o = mini.decode(text);
                    if (o.data.signContent) {
                        $("#view").attr("src", "data:image/png;base64," + o.data.signContent);
                    }
                }
            });
        } else {
            $("#view").remove();
        }
    }

    function CloseWindow(action) {
        if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
        else window.close();
    }
</script>


</body>
</html>
